import React, { useState, useEffect } from 'react'
import { Table, Space, Button, Popconfirm } from 'antd'
import { useHistory } from 'react-router-dom'
import { getBannerList, deleteBannerItem } from './../../api/banner'
function BannerList() {
  const [ bannerList, setBannerList ] = useState([])
  useEffect(() => {
    getBannerList().then(res => {
      setBannerList(res.data.data)
    })
  }, [])
  const columns = [
    {
      title: '序号',
      render (text, record, index) { // 可以用来自定义列的信息
        return <span>{ index + 1 }</span>
      }
    },
    {
      title: '图片',
      dataIndex: 'img', // 必须通过dataIndex保持和数据库中的字段一致
      render (text, record, index) {
        // text 代表当前的img字段的值
        // record 代表的是当前一整条数据
        return <img src={ text } alt={record.alt} style={ { height: 80 }} />
      }
    },
    {
      title: '提示',
      dataIndex: 'alt' // 如果不需要自定义列的内容， dataIndex的值就是渲染的结果
    },
    {
      title: '链接',
      dataIndex: 'link'
    },
    {
      title: '操作',
      render (text, record, index) {
        return (
          <Space>
            <Button disabled type="ghost">编辑</Button>
            <Popconfirm
              title="确定删除吗?"
              onConfirm={() => {
                deleteBannerItem({ bannerid: record.bannerid }).then(() => {
                  getBannerList().then(res => { // 重新获取状态保持数据的及时性
                    setBannerList(res.data.data)
                  })
                })
              }}
              onCancel={ () => {}}
              okText="确定"
              cancelText="取消"
            >
              <Button danger >删除</Button>
            </Popconfirm>
            
          </Space>
        )
      } 
    }
  ]

  const history = useHistory()
  return (
    <div>
      <Button type="primary" onClick = { () => {
        history.push('/banner/add')
      }}>添加轮播图</Button>
      <Table dataSource={bannerList} columns={columns} rowKey="bannerid"/>
    </div>
  )
}

export default BannerList
